<script setup>
import A from "@/components/content/ProseA.vue";

const route = useRoute();
const { data: page } = await useAsyncData(route.path, () =>
    queryCollection("pages").path(`/pages${route.path}`).first()
);

useSeoMeta({
    title: page.value?.title,
    description: page.value?.description
});
</script>

<template>
    <div
        v-if="page"
        class="py-8"
    >
        <h1
            class="text-3xl font-bold text-gray-900 dark:text-gray-200 sm:text-4xl md:text-5xl lg:text-6xl"
        >
            {{ page.title }}
        </h1>

        <ContentRenderer
            :value="page"
            :class="[
                'prose prose-lg prose-slate dark:prose-invert',
                'max-w-none mx-auto',
                'mt-6',
            ]"
        />
    </div>

    <div v-else>
        <article class="grid place-items-center gap-6 mt-12">
            <h2 class="text-3xl font-bold text-gray-900 dark:text-gray-200">It seems you might be lost...</h2>
            <p class="text-gray-500 dark:text-gray-400">Please check the URL and try again.</p>

            <div></div>

            <div class="flex flex-row gap-2 items-baseline">
                <A href="/" target="_self" class="text-lg">
                    Take me home!</A>
                <span class="text-gray-500 dark:text-gray-400 text-sm">(country roads)</span>
            </div>
        </article>
    </div>
</template>
